<template>
  <div
    class="float-ball"
    @click="toggleAppWindow"
    :title="isAppCollapsed ? '点击展开' : ''"
  >
    <img src="https://ssc.homedo.com/static/gif/flower-d1d9a04c.gif" alt="管小花">
  </div>
</template>

<script setup>
import {ref} from 'vue'
import eventBus from "@/utils/mitt.js";

const isAppCollapsed = ref(false)
const originalBounds = ref(null)
const emit = defineEmits(["ball"]);
const toggleAppWindow = async () => {
  try {
    emit('ball', isAppCollapsed.value)
    if (!window.electronAPI) return

    if (isAppCollapsed.value) {
      // 展开应用
      eventBus.emit('changeColor', 'rgba(0, 0, 0, .55)')
      window.electronAPI.send('setWindowBounds', {
        width: 800,
        height: 600,
        turnIntoABall: false
      })
    } else {
      eventBus.emit('changeColor', 'transparent')
      window.electronAPI.send('setWindowBounds', {
        width: 90,
        height: 90,
        turnIntoABall: true
      })
    }
    isAppCollapsed.value = !isAppCollapsed.value
  } catch (error) {
    console.error('窗口操作失败:', error)
  }
}
defineExpose({
  toggleAppWindow
});
</script>

<style scoped lang="scss">
.float-ball {
  //position: fixed;
  //bottom: 10px;
  //right: 10px;
  width: 80px;
  height: 80px;
  cursor: pointer;
  z-index: 9999;
  transition: transform 0.3s;

  &:hover {
    transform: scale(1.1);
    &::after {
      content: "点击展开";
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.7);
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      white-space: nowrap;
    }
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
}
</style>
